<script setup>
import { ref, onUpdated } from 'vue';
import MessageList from './MessageList.vue';
import InputArea from './InputArea.vue';

defineProps({
  selectedUser: String,
  messages: Array,
  newMessage: String
});

defineEmits(['send-message', 'update:newMessage']);

const messageArea = ref(null);

const scrollToBottom = () => {
  if (messageArea.value) {
    messageArea.value.scrollTop = messageArea.value.scrollHeight;
  }
};

onUpdated(() => {
  scrollToBottom();
});
</script>

<template>
  <div class="chat-container">
    <div class="chat-header" v-if="selectedUser">
      <div class="current-chat-user">
        <div class="user-avatar-small">{{ selectedUser.charAt(0) }}</div>
        <div>
          <div class="user-name">{{ selectedUser }}</div>
          <div class="user-status">
            <span class="status-indicator status-online"></span>
            <span>在线</span>
<!--            <span>在线 · 正在输入</span>-->
<!--            <div class="typing-indicator">-->
<!--              <div class="typing-dot"></div>-->
<!--              <div class="typing-dot"></div>-->
<!--              <div class="typing-dot"></div>-->
<!--            </div>-->
          </div>
        </div>
      </div>
    </div>

    <div class="message-area" ref="messageArea" v-if="selectedUser">
      <MessageList
          :messages="messages"
          :currentUser="selectedUser"
      />
    </div>

    <div class="empty-chat" v-else>
      <div class="empty-icon">
        <i class="fas fa-comment-alt"></i>
      </div>
      <h3 class="empty-text">选择一个对话开始聊天</h3>
      <button class="btn btn-primary" @click="$emit('select-user', '李四')">
        <i class="fas fa-comment"></i> 查看演示消息
      </button>
    </div>

    <InputArea
        v-if="selectedUser"
        :newMessage="newMessage"
        @send-message="$emit('send-message')"
        @update:newMessage="$emit('update:newMessage', $event)"
    />
  </div>
</template>

<style scoped>
/* 样式已在全局chat.css中定义 */
@import '@/assets/chat.css';
</style>
